<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/plugin-element/plugin-element.html">
<link rel="import" href="../bower_components/plugin-element/plugin-xhr.html">
<link rel="import" href="../bower_components/plugin-element/plugin-message.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="shop-common-styles.html">
<dom-module id="shop-find-coupon">
    <template>
        <style include="shop-common-styles">
            :host{
                padding: 10px 0px;
                display: block;
            }
            paper-icon-item{
                border-bottom: #ccc dotted 1px;
                padding: 10px;
            }
            paper-icon-item paper-button{
                background-color: #003366;
                color: #fff;
                min-width: 0px;
                margin: 0px;
            }
            div[slot=item-icon]{
                background-color: #ddd;
                color: #000;
                border-radius: 50%;
                width: 50px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div[secondary]{
                font-size: 12px;
            }
        </style>
        <plugin-message id="msg"></plugin-message>
        <plugin-xhr id="xhr_coupon" auto url="[[app.apiHost]]/coupon.list?app_id=[[app.appId]]" response="{{coupons}}"></plugin-xhr>
        <plugin-xhr id="xhr_coupon_receive" url="[[app.apiHost]]/coupon.receive"></plugin-xhr>
        <header>
            <h1>本店优惠券</h1>
            <span>[[coupons.result.length]]张</span>
        </header>
        <paper-listbox>
            <template is="dom-repeat" items="[[coupons.result]]" as="coupon">
                <paper-icon-item>
                    <div slot="item-icon">
                        ￥[[coupon.money]]
                    </div>
                    <paper-item-body two-line>
                        <div>
                            <template is="dom-if" if="[[_equal(coupon.terms,'order-money')]]">
                                订单金额满[[_money(coupon.quantity)]]元使用
                            </template>
                            <template is="dom-if" if="[[_equal(coupon.terms,'product-quantity')]]">
                                商品数量满[[coupon.quantity]]件使用
                            </template>
                        </div>
                        <div secondary>
                            启用时间：[[_date(coupon.starttime,'yyyy年MM月dd日 HH点:mm分')]]
                            <br/>
                            失效时间：[[_date(coupon.endtime,'yyyy年MM月dd日 HH点:mm分')]]
                        </div>
                    </paper-item-body>
                    <paper-button on-click="_receiveCoupon">领取</paper-button>
                </paper-icon-item>
            </template>
        </paper-listbox>
    </template>

    <script>
        class ShopFindCoupon extends PluginElement {

            static get is() {
                return 'shop-find-coupon';
            }

            static get properties() {
                return {
                    visible: {
                        type: Boolean,
                        observer: '_visibleChanged'
                    }
                }
            }
            _visibleChanged(visible) {
            }
            _receiveCoupon(e){
                let dom = this;
                this.$.xhr_coupon_receive.param("coupon_id",e.model.coupon.id).callback(function(){
                    dom.$.msg._message(e.model.coupon.money+"元优惠券领取成功！");
                }).get();
            }
        }

        customElements.define(ShopFindCoupon.is, ShopFindCoupon);

    </script>

</dom-module>
